Client setup

De Afosto Storefront Client, te gebruiken d.m.v. de @afosto/storefront JavaScript package, maakt naadloze interactie mogelijk met de Afosto GraphQL storefront. Deze handleiding helpt je deze package te installeren en configureren in je website of applicatie.

Installatie

Je kunt de Afosto Storefront Client installeren via Yarn, NPM of direct in je browser.

Yarn / NPM

Om te installeren via Yarn of NPM, voer je een van de volgende commando's uit:

1# Installeren met Yarn
2yarn add @afosto/storefront
3
4# Installeren met NPM
5npm install @afosto/storefront

Browser

Als je direct integreert in een webpagina, kun je het pakket toevoegen via een scripttag. De client ondersteunt de laatste twee versies van de belangrijkste browsers (Chrome, Edge, Firefox, Safari).

1<script src="https://cdn.jsdelivr.net/npm/@afosto/storefront@latest/dist/umd/afosto-storefront.min.js"></script>

Aan de slag

Om de Afosto Storefront Client te gebruiken, moet je deze eerst importeren en een instantie van de client initialiseren.

ES6

Bij gebruik van ES6 imports:

1import StorefrontClient from '@afosto/storefront';
2
3const client = StorefrontClient({
4  storefrontToken: 'STOREFRONT_TOKEN',
5});

CJS

Bij gebruik van CommonJS:

1const StorefrontClient = require('@afosto/storefront');
2
3const client = StorefrontClient({
4  storefrontToken: 'STOREFRONT_TOKEN',
5});

Browser

Direct in de browser:

1<script>
2    const client = afostoStorefront.Client({
3      storefrontToken: 'STOREFRONT_TOKEN'
4    });
5</script>

Configuratie

De Afosto Storefront Client kan worden geconfigureerd met verschillende opties.

storefrontToken (vereist)

Het token gebruikt voor authenticatie met de Afosto GraphQL storefront. Het koppelt je winkel aan een verkoopkanaal.

autoCreateCart

Deze boolean vertelt de client of er automatisch een winkelwagen moet worden aangemaakt als je een item probeert toe te voegen. Als het op true staat en er is geen bestaande winkelwagen, maakt de client een nieuwe aan. Standaard is dit true.

autoGenerateSessionID

Als je de Afosto Storefront-client gebruikt, wordt er automatisch een sessie-ID gegenereerd voor de klant. Met deze sessie-ID kunnen we de klant volgen tijdens het bestelproces. Standaard staat dit op true.

graphQLClientOptions

Onze @afosto/graphql-client heeft extra opties die je kunt gebruiken om de respons en payload die naar de GraphQL API wordt gestuurd te transformeren. Bekijk de documentatie om te zien welke opties beschikbaar zijn.

storeCartToken

Deze optie vertelt de client of hij de cart token in web storage moet opslaan. Als het op true staat, wordt de token opgeslagen in localStorage of sessionStorage, afhankelijk van het geselecteerde storageType. Standaard staat dit op true.

storageKeyPrefix

Stel een voorvoegsel in voor de sleutel die wordt gebruikt om de cart token op te slaan. Het standaard voorvoegsel is afosto.storefront.

storageType

Selecteer het type opslag om de cart token in op te slaan, wanneer storeCartToken op true staat. Dit kan localStorage of sessionStorage zijn. De standaard opslagoptie is localStorage. Let op: sessionStorage zal de cart token vergeten als een klant het tabblad van je winkel sluit.

Met de Afosto Storefront Client succesvol geïnstalleerd en geconfigureerd, kun je nu doorgaan met interactie met de Afosto GraphQL storefront en winkelwagens aanmaken en beheren.